<script setup lang="ts">
import jsonData from "#/index.json"
import { onMounted, ref, watch } from "vue"
import { getPositionInformation } from "@/api/position"
import { PositionDetails, QueryPositionFormParams } from "@/api/position/type"
import { cloneDeep } from "lodash-es"
import { addressCascaderOpts, getAddressDetails, transformAddressToString } from "@/utils/transform"
import { FormInstance, FormRules } from "element-plus"
import { usePagination } from "@/hooks/usePagination"
import { useRouter } from "vue-router"

const router = useRouter()

// #region 查询岗位
const DEFAULT_FORM_PARAMS: QueryPositionFormParams = {
  studyingExperience: undefined,
  workAddress: [],
  workPrice: undefined,
  workName: "",
  workTime: undefined
}
const cascaderOpts = ref()
const searchFormRef = ref<FormInstance | null>()
const formData = ref(cloneDeep(DEFAULT_FORM_PARAMS))
const formRules: FormRules = {
  workName: [{ type: "string" }],
  studyingExperience: [
    {
      trigger: "change",
      validator: (rule, val, cb) => {
        if ([undefined, 0, 1, 2, 3, 4, 5, 6].includes(val)) {
          cb()
        } else {
          cb("请选择正确的学历选项")
        }
      }
    }
  ],
  workTime: [
    {
      trigger: "change",
      validator: (rule, val, cb) => {
        if ([undefined, 0, 1, 2, 3, 4, 5].includes(val)) {
          cb()
        } else {
          cb("请选择正确的工作经验范围")
        }
      }
    }
  ],
  workAddress: [
    {
      type: "array",
      trigger: "change",
      validator: (rule, val, cb) => {
        if (val === undefined || (Array.isArray(val) && [0, 1, 2, 3].includes(val.length))) {
          cb()
        } else {
          cb("您选择的工作区域地址不正确")
        }
      }
    }
  ],
  workMinPrice: [
    {
      type: "number",
      trigger: "blur",
      message: "你输入的期望最少工资不正确"
    }
  ],
  workMaxPrice: [
    {
      type: "number",
      trigger: "blur",
      message: "你输入的期望最多工资不正确"
    }
  ]
}
const { paginationData, handleCurrentChange } = usePagination({
  current: 1,
  layout: "total, prev, pager, next, jumper"
})
const positionData = ref<PositionDetails[]>([])
const getResourecLabel = (val: number | string, resource: { value: number; label: string }[]) => {
  if (val === undefined) val = "1"
  const [tagItem] = resource.filter((item) => item.value === Number(val))
  return tagItem.label
}

function getPositionData() {
  const paginationParams = {
    current: paginationData.current,
    pageSize: paginationData.pageSize,
    sortOrder: "desc"
  }
  const fixedParams = {
    workStatus: 2 as const,
    workAddress: transformAddressToString(formData.value.workAddress || [])
  }
  getPositionInformation({ ...formData.value, ...fixedParams, ...paginationParams }).then(({ data }) => {
    positionData.value = data.records
    paginationData.total = Number(data.total)
  })
}

function resetSearch() {
  searchFormRef.value?.resetFields()
  getPositionData()
}

watch(
  () => paginationData.current,
  () => {
    getPositionData()
  }
)

onMounted(() => {
  cascaderOpts.value = addressCascaderOpts
  getPositionData()
})
// #endregion

// #endregion
</script>

<template>
  <div class="main-job">
    <el-card class="search-card" shadow="never">
      <el-form ref="searchFormRef" :model="formData" :rules="formRules" :inline="true">
        <el-form-item label="职位名称" prop="workName">
          <el-input v-model="formData.workName" style="width: 170px" placeholder="请输入职位名称" clearable />
        </el-form-item>
        <el-form-item label="学历" prop="studyingExperience">
          <el-select v-model="formData.studyingExperience" style="width: 130px" placeholder="请选择学历" clearable>
            <el-option
              v-for="{ value, label } in jsonData.studyacademicDegree"
              :key="value"
              :label="label"
              :value="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作经验" prop="workTime">
          <el-select v-model="formData.workTime" style="width: 170px" placeholder="请选择工作经验范围" clearable>
            <el-option v-for="{ value, label } in jsonData.workTime" :key="value" :label="label" :value="value" />
          </el-select>
        </el-form-item>
        <el-form-item label="工作区域" prop="workAddress">
          <el-cascader :options="cascaderOpts" v-model="formData.workAddress as any" style="width: 320px" clearable />
        </el-form-item>
        <el-form-item label="薪资范围" prop="workPrice">
          <el-select v-model="formData.workPrice" placeholder="请选择薪资范围" style="width: 200px" clearable>
            <el-option v-for="{ label, value } in jsonData.workPrice" :key="value" :value="value" :label="label" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPositionData()">筛选</el-button>
          <el-button plain @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="position-wrapper">
      <el-card class="" v-if="positionData.length === 0" shadow="never">
        <el-empty description="空数据" />
      </el-card>
      <el-card class="position-card" v-else v-for="pos in positionData" :key="pos.id" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-row justify="space-between">
              <el-col :span="18">
                <el-text class="fw-700" type="primary" size="large">{{ pos.workName }}</el-text>
              </el-col>
              <el-col :span="6">
                <el-text type="info">薪资范围</el-text>
                &nbsp;
                <el-text>{{ getResourecLabel(pos.workPrice!, jsonData.workPrice) }}</el-text>
              </el-col>
            </el-row>
          </div>
        </template>
        <div class="card-content">
          <div class="work">
            <el-text class="fw-700">工作描述</el-text>
            <div class="work-details" v-html="pos.workDescription" />
          </div>
          <div class="work-tag">
            <div class="flex gap-2">
              <el-tag class="academic-degree" type="info">{{
                getResourecLabel(String(pos.studyingExperience), jsonData.studyacademicDegree)
              }}</el-tag>
              <el-tag class="work-experience" type="info">
                {{ getResourecLabel(String(pos.workTime), jsonData.workTime) }}
              </el-tag>
            </div>
          </div>
        </div>
        <template #footer>
          <el-row justify="space-between" align="middle">
            <el-col :span="18">
              <div>
                <span class="company">
                  <svg-icon name="company" />
                  {{ pos.companyVO.companyShortName }}
                </span>
                &nbsp;
                <span class="address">
                  <span v-show="Array.isArray(pos.workAddress) && pos.workAddress.length !== 0" class="address">
                    <svg-icon name="address" />
                    <span style="font-size: 14px">{{ getAddressDetails(pos.workAddress as any) }}</span>
                  </span>
                </span>
              </div>
            </el-col>
            <el-col :span="6">
              <el-button plain @click="() => router.push(`/job-details/${pos.id}`)">查看详情</el-button>
            </el-col>
          </el-row>
        </template>
      </el-card>
    </div>
    <el-card class="pager-wrapper" shadow="never">
      <el-pagination
        background
        :layout="paginationData.layout"
        :total="paginationData.total"
        :page-size="paginationData.pageSize"
        :current-page="paginationData.current"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/mixins.scss" as *;

.main-job {
  box-sizing: border-box;
  .search-card {
    margin-bottom: 20px;
  }
  .position-card {
    border-radius: 15px;

    &:not(:last-child) {
      margin-bottom: 20px;
    }

    :deep(.el-card__header) {
      padding: 15px 15px 0 15px;
      border: none;
    }

    :deep(.el-card__body) {
      padding: 10px 15px 0 15px;
    }

    :deep(.el-card__footer) {
      padding: 0 15px 10px 15px;
      border: none;
    }

    .card-content {
      line-height: 1.5;

      .work-details {
        white-space: pre-line;
        line-height: 2;
        font-size: 14px;
        @include ellipsis-n(2);
      }
    }
  }
}
</style>
